<template>
  <view class="subcategory-page">
    <!-- 标签栏 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        v-for="(tab, index) in currentTabs" 
        :key="index"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <text class="tab-text">{{ tab.name }}</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 商品网格 -->
      <view v-if="currentProducts.length > 0" class="product-section">
        <view class="product-grid">
          <view class="product-item" v-for="(product, index) in currentProducts" :key="index" @click="goToProductDetail(product)">
            <image class="product-image" :src="product.image"></image>
            <text class="product-name">{{ product.name }}</text>
            <view class="product-tags">
              <view class="tag self-operated">自营</view>
              <view class="tag flash-sale">秒杀</view>
            </view>
            <view class="promotion-tags">
              <view class="promo-tag">满10减9</view>
              <view class="promo-tag">满10减4</view>
            </view>
            <view class="price-section">
              <text class="price-symbol">¥</text>
              <text class="price-value">{{ product.price }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-else class="empty-state">
        <view class="empty-icon">
          <text class="box-icon">📦</text>
          <text class="sad-face">:(</text>
        </view>
        <text class="empty-text">没有数据哦~</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      categoryName: '',
      categoryId: '',
      brandName: '',
      selectedCategory: '', // 新增：记录选中的分类
      currentTabs: [],
      allProducts: {},
      currentProducts: []
    }
  },
  onLoad(options) {
    // 接收参数
    if (options.name) {
      this.categoryName = options.name;
    }
    if (options.id) {
      this.categoryId = options.id;
    }
    if (options.brand) {
      this.brandName = options.brand;
    }
    if (options.category) {
      this.selectedCategory = options.category; // 新增：接收选中的分类参数
    }
    
    // 根据分类加载对应的标签和商品数据
    this.loadCategoryData();
  },
  methods: {
    // 加载分类数据
    loadCategoryData() {
      // 这里可以根据 categoryName 或 categoryId 从数据库获取数据
      // 目前使用模拟数据
      this.loadTabsAndProducts();
    },
    
    // 加载标签和商品数据
    loadTabsAndProducts() {
      // 模拟从数据库获取的数据
      const categoryData = {
        '品牌分类': {
          tabs: [
            { name: '所有品牌', id: 'all_brands' },
            { name: 'YSL1', id: 'ysl1' },
            { name: 'ASd234', id: 'asd234' },
            { name: '1022', id: '1022' },
            { name: '1234', id: '1234' }
          ],
          products: {
            'all_brands': [
              { id: 1, name: 'YSL口红', image: '/static/balance/口红.png', price: '320.00' },
              { id: 2, name: 'MAC口红', image: '/static/balance/口红.png', price: '170.00' },
              { id: 3, name: 'Dior口红', image: '/static/balance/口红.png', price: '399.00' },
              { id: 4, name: 'Chanel口红', image: '/static/balance/口红.png', price: '359.00' }
            ],
            'ysl1': [
              { id: 5, name: 'YSL方管口红', image: '/static/balance/口红.png', price: '320.00' },
              { id: 6, name: 'YSL圆管口红', image: '/static/balance/口红.png', price: '350.00' },
              { id: 7, name: 'YSL小金条', image: '/static/balance/口红.png', price: '380.00' },
              { id: 8, name: 'YSL黑管唇釉', image: '/static/balance/口红.png', price: '320.00' }
            ],
            'asd234': [
              { id: 9, name: 'ASd234口红A', image: '/static/balance/口红.png', price: '199.00' },
              { id: 10, name: 'ASd234口红B', image: '/static/balance/口红.png', price: '229.00' }
            ],
            '1022': [
              { id: 11, name: '1022品牌口红', image: '/static/balance/口红.png', price: '159.00' },
              { id: 12, name: '1022唇釉', image: '/static/balance/口红.png', price: '189.00' }
            ],
            '1234': [
              { id: 13, name: '1234系列口红', image: '/static/balance/口红.png', price: '129.00' },
              { id: 14, name: '1234唇彩', image: '/static/balance/口红.png', price: '149.00' }
            ]
          }
        },
        '清洁卸妆': {
          tabs: [
            { name: '清洁卸妆', id: 'cleansing' },
            { name: '美妆工具', id: 'makeup_tools' },
            { name: '彩妆香氛', id: 'makeup_fragrance' },
            { name: '身体护肤', id: 'body_care' },
            { name: '面膜1', id: 'mask1' },
            { name: '护肤美肤', id: 'skincare' }
          ],
          products: {
            'cleansing': [
              { id: 15, name: '贝德玛卸妆水', image: '/static/balance/口红.png', price: '89.00' },
              { id: 16, name: '美宝莲卸妆水', image: '/static/balance/口红.png', price: '59.00' },
              { id: 17, name: '植村秀卸妆油', image: '/static/balance/口红.png', price: '280.00' }
            ],
            'makeup_tools': [
              { id: 18, name: 'MAC化妆刷套装', image: '/static/balance/口红.png', price: '299.00' },
              { id: 19, name: 'Real Techniques刷具', image: '/static/balance/口红.png', price: '89.00' }
            ],
            'makeup_fragrance': [
              { id: 20, name: 'YSL口红', image: '/static/balance/口红.png', price: '320.00' },
              { id: 21, name: 'MAC口红', image: '/static/balance/口红.png', price: '170.00' }
            ],
            'body_care': [
              { id: 22, name: '凡士林身体乳', image: '/static/balance/口红.png', price: '45.00' },
              { id: 23, name: '妮维雅身体乳', image: '/static/balance/口红.png', price: '35.00' }
            ],
            'mask1': [
              { id: 24, name: '森田补水面膜', image: '/static/balance/口红.png', price: '15.00' },
              { id: 25, name: '美即补水面膜', image: '/static/balance/口红.png', price: '12.00' }
            ],
            'skincare': [
              { id: 26, name: '兰蔻小黑瓶', image: '/static/balance/口红.png', price: '850.00' },
              { id: 27, name: '雅诗兰黛小棕瓶', image: '/static/balance/口红.png', price: '780.00' }
            ]
          }
        },
        '美妆工具': {
          tabs: [
            { name: '清洁卸妆', id: 'cleansing' },
            { name: '美妆工具', id: 'makeup_tools' },
            { name: '彩妆香氛', id: 'makeup_fragrance' },
            { name: '身体护肤', id: 'body_care' },
            { name: '面膜1', id: 'mask1' },
            { name: '护肤美肤', id: 'skincare' }
          ],
          products: {
            'cleansing': [
              { id: 28, name: '贝德玛卸妆水', image: '/static/balance/口红.png', price: '89.00' },
              { id: 29, name: '美宝莲卸妆水', image: '/static/balance/口红.png', price: '59.00' },
              { id: 30, name: '植村秀卸妆油', image: '/static/balance/口红.png', price: '280.00' }
            ],
            'makeup_tools': [
              { id: 31, name: 'MAC化妆刷套装', image: '/static/balance/口红.png', price: '299.00' },
              { id: 32, name: 'Real Techniques刷具', image: '/static/balance/口红.png', price: '89.00' },
              { id: 33, name: 'Beauty Blender美妆蛋', image: '/static/balance/口红.png', price: '168.00' }
            ],
            'makeup_fragrance': [
              { id: 34, name: 'YSL口红', image: '/static/balance/口红.png', price: '320.00' },
              { id: 35, name: 'MAC口红', image: '/static/balance/口红.png', price: '170.00' }
            ],
            'body_care': [
              { id: 36, name: '凡士林身体乳', image: '/static/balance/口红.png', price: '45.00' },
              { id: 37, name: '妮维雅身体乳', image: '/static/balance/口红.png', price: '35.00' }
            ],
            'mask1': [
              { id: 38, name: '森田补水面膜', image: '/static/balance/口红.png', price: '15.00' },
              { id: 39, name: '美即补水面膜', image: '/static/balance/口红.png', price: '12.00' }
            ],
            'skincare': [
              { id: 40, name: '兰蔻小黑瓶', image: '/static/balance/口红.png', price: '850.00' },
              { id: 41, name: '雅诗兰黛小棕瓶', image: '/static/balance/口红.png', price: '780.00' }
            ]
          }
        },
        '彩妆香氛': {
          tabs: [
            { name: '清洁卸妆', id: 'cleansing' },
            { name: '美妆工具', id: 'makeup_tools' },
            { name: '彩妆香氛', id: 'makeup_fragrance' },
            { name: '身体护肤', id: 'body_care' },
            { name: '面膜1', id: 'mask1' },
            { name: '护肤美肤', id: 'skincare' }
          ],
          products: {
            'cleansing': [
              { id: 42, name: '贝德玛卸妆水', image: '/static/balance/口红.png', price: '89.00' },
              { id: 43, name: '美宝莲卸妆水', image: '/static/balance/口红.png', price: '59.00' },
              { id: 44, name: '植村秀卸妆油', image: '/static/balance/口红.png', price: '280.00' }
            ],
            'makeup_tools': [
              { id: 45, name: 'MAC化妆刷套装', image: '/static/balance/口红.png', price: '299.00' },
              { id: 46, name: 'Real Techniques刷具', image: '/static/balance/口红.png', price: '89.00' }
            ],
            'makeup_fragrance': [
              { id: 47, name: 'YSL口红', image: '/static/balance/口红.png', price: '320.00' },
              { id: 48, name: 'MAC口红', image: '/static/balance/口红.png', price: '170.00' },
              { id: 49, name: 'Urban Decay眼影盘', image: '/static/balance/口红.png', price: '450.00' },
              { id: 50, name: 'Chanel香水', image: '/static/balance/口红.png', price: '1280.00' }
            ],
            'body_care': [
              { id: 51, name: '凡士林身体乳', image: '/static/balance/口红.png', price: '45.00' },
              { id: 52, name: '妮维雅身体乳', image: '/static/balance/口红.png', price: '35.00' }
            ],
            'mask1': [
              { id: 53, name: '森田补水面膜', image: '/static/balance/口红.png', price: '15.00' },
              { id: 54, name: '美即补水面膜', image: '/static/balance/口红.png', price: '12.00' }
            ],
            'skincare': [
              { id: 55, name: '兰蔻小黑瓶', image: '/static/balance/口红.png', price: '850.00' },
              { id: 56, name: '雅诗兰黛小棕瓶', image: '/static/balance/口红.png', price: '780.00' }
            ]
          }
        },
        '身体护肤': {
          tabs: [
            { name: '清洁卸妆', id: 'cleansing' },
            { name: '美妆工具', id: 'makeup_tools' },
            { name: '彩妆香氛', id: 'makeup_fragrance' },
            { name: '身体护肤', id: 'body_care' },
            { name: '面膜1', id: 'mask1' },
            { name: '护肤美肤', id: 'skincare' }
          ],
          products: {
            'cleansing': [
              { id: 57, name: '贝德玛卸妆水', image: '/static/balance/口红.png', price: '89.00' },
              { id: 58, name: '美宝莲卸妆水', image: '/static/balance/口红.png', price: '59.00' },
              { id: 59, name: '植村秀卸妆油', image: '/static/balance/口红.png', price: '280.00' }
            ],
            'makeup_tools': [
              { id: 60, name: 'MAC化妆刷套装', image: '/static/balance/口红.png', price: '299.00' },
              { id: 61, name: 'Real Techniques刷具', image: '/static/balance/口红.png', price: '89.00' }
            ],
            'makeup_fragrance': [
              { id: 62, name: 'YSL口红', image: '/static/balance/口红.png', price: '320.00' },
              { id: 63, name: 'MAC口红', image: '/static/balance/口红.png', price: '170.00' }
            ],
            'body_care': [
              { id: 64, name: '凡士林身体乳', image: '/static/balance/口红.png', price: '45.00' },
              { id: 65, name: '妮维雅身体乳', image: '/static/balance/口红.png', price: '35.00' },
              { id: 66, name: '多芬沐浴露', image: '/static/balance/口红.png', price: '25.00' },
              { id: 67, name: '欧舒丹护手霜', image: '/static/balance/口红.png', price: '89.00' }
            ],
            'mask1': [
              { id: 68, name: '森田补水面膜', image: '/static/balance/口红.png', price: '15.00' },
              { id: 69, name: '美即补水面膜', image: '/static/balance/口红.png', price: '12.00' }
            ],
            'skincare': [
              { id: 70, name: '兰蔻小黑瓶', image: '/static/balance/口红.png', price: '850.00' },
              { id: 71, name: '雅诗兰黛小棕瓶', image: '/static/balance/口红.png', price: '780.00' }
            ]
          }
        },
        '面膜1': {
          tabs: [
            { name: '清洁卸妆', id: 'cleansing' },
            { name: '美妆工具', id: 'makeup_tools' },
            { name: '彩妆香氛', id: 'makeup_fragrance' },
            { name: '身体护肤', id: 'body_care' },
            { name: '面膜1', id: 'mask1' },
            { name: '护肤美肤', id: 'skincare' }
          ],
          products: {
            'cleansing': [
              { id: 72, name: '贝德玛卸妆水', image: '/static/balance/口红.png', price: '89.00' },
              { id: 73, name: '美宝莲卸妆水', image: '/static/balance/口红.png', price: '59.00' },
              { id: 74, name: '植村秀卸妆油', image: '/static/balance/口红.png', price: '280.00' }
            ],
            'makeup_tools': [
              { id: 75, name: 'MAC化妆刷套装', image: '/static/balance/口红.png', price: '299.00' },
              { id: 76, name: 'Real Techniques刷具', image: '/static/balance/口红.png', price: '89.00' }
            ],
            'makeup_fragrance': [
              { id: 77, name: 'YSL口红', image: '/static/balance/口红.png', price: '320.00' },
              { id: 78, name: 'MAC口红', image: '/static/balance/口红.png', price: '170.00' }
            ],
            'body_care': [
              { id: 79, name: '凡士林身体乳', image: '/static/balance/口红.png', price: '45.00' },
              { id: 80, name: '妮维雅身体乳', image: '/static/balance/口红.png', price: '35.00' }
            ],
            'mask1': [
              { id: 81, name: '森田补水面膜', image: '/static/balance/口红.png', price: '15.00' },
              { id: 82, name: '美即补水面膜', image: '/static/balance/口红.png', price: '12.00' },
              { id: 83, name: 'SK-II美白面膜', image: '/static/balance/口红.png', price: '120.00' },
              { id: 84, name: '科颜氏白泥面膜', image: '/static/balance/口红.png', price: '280.00' }
            ],
            'skincare': [
              { id: 85, name: '兰蔻小黑瓶', image: '/static/balance/口红.png', price: '850.00' },
              { id: 86, name: '雅诗兰黛小棕瓶', image: '/static/balance/口红.png', price: '780.00' }
            ]
          }
        },
        '护肤美肤': {
          tabs: [
            { name: '清洁卸妆', id: 'cleansing' },
            { name: '美妆工具', id: 'makeup_tools' },
            { name: '彩妆香氛', id: 'makeup_fragrance' },
            { name: '身体护肤', id: 'body_care' },
            { name: '面膜1', id: 'mask1' },
            { name: '护肤美肤', id: 'skincare' }
          ],
          products: {
            'cleansing': [
              { id: 87, name: '贝德玛卸妆水', image: '/static/balance/口红.png', price: '89.00' },
              { id: 88, name: '美宝莲卸妆水', image: '/static/balance/口红.png', price: '59.00' },
              { id: 89, name: '植村秀卸妆油', image: '/static/balance/口红.png', price: '280.00' }
            ],
            'makeup_tools': [
              { id: 90, name: 'MAC化妆刷套装', image: '/static/balance/口红.png', price: '299.00' },
              { id: 91, name: 'Real Techniques刷具', image: '/static/balance/口红.png', price: '89.00' }
            ],
            'makeup_fragrance': [
              { id: 92, name: 'YSL口红', image: '/static/balance/口红.png', price: '320.00' },
              { id: 93, name: 'MAC口红', image: '/static/balance/口红.png', price: '170.00' }
            ],
            'body_care': [
              { id: 94, name: '凡士林身体乳', image: '/static/balance/口红.png', price: '45.00' },
              { id: 95, name: '妮维雅身体乳', image: '/static/balance/口红.png', price: '35.00' }
            ],
            'mask1': [
              { id: 96, name: '森田补水面膜', image: '/static/balance/口红.png', price: '15.00' },
              { id: 97, name: '美即补水面膜', image: '/static/balance/口红.png', price: '12.00' }
            ],
            'skincare': [
              { id: 98, name: '兰蔻小黑瓶', image: '/static/balance/口红.png', price: '850.00' },
              { id: 99, name: '雅诗兰黛小棕瓶', image: '/static/balance/口红.png', price: '780.00' },
              { id: 100, name: '倩碧黄油', image: '/static/balance/口红.png', price: '185.00' },
              { id: 101, name: '兰蔻粉水', image: '/static/balance/口红.png', price: '420.00' }
            ]
          }
        },
        '彩妆': {
          tabs: [
            { name: '新的分类', id: 'new_category' },
            { name: '口红', id: 'lipstick' }
          ],
          products: {
            'new_category': [
              { id: 102, name: '彩妆新品A', image: '/static/balance/口红.png', price: '299.00' },
              { id: 103, name: '彩妆新品B', image: '/static/balance/口红.png', price: '199.00' },
              { id: 104, name: '彩妆新品C', image: '/static/balance/口红.png', price: '159.00' }
            ],
            'lipstick': [
              { id: 105, name: 'YSL方管口红', image: '/static/balance/口红.png', price: '320.00' },
              { id: 106, name: 'MAC子弹头', image: '/static/balance/口红.png', price: '170.00' },
              { id: 107, name: 'Dior烈焰蓝金', image: '/static/balance/口红.png', price: '399.00' },
              { id: 108, name: 'Chanel丝绒', image: '/static/balance/口红.png', price: '359.00' }
            ],
            'eyeshadow': [
              { id: 109, name: 'Urban Decay眼影盘', image: '/static/balance/口红.png', price: '450.00' },
              { id: 110, name: 'Too Faced眼影盘', image: '/static/balance/口红.png', price: '380.00' },
              { id: 111, name: 'Huda Beauty眼影盘', image: '/static/balance/口红.png', price: '520.00' }
            ],
            'foundation': [
              { id: 112, name: '雅诗兰黛DW粉底', image: '/static/balance/口红.png', price: '420.00' },
              { id: 113, name: '兰蔻持妆粉底', image: '/static/balance/口红.png', price: '480.00' },
              { id: 114, name: 'MAC定制粉底', image: '/static/balance/口红.png', price: '320.00' }
            ],
            'blush': [
              { id: 115, name: 'NARS腮红', image: '/static/balance/口红.png', price: '280.00' },
              { id: 116, name: 'Benefit腮红', image: '/static/balance/口红.png', price: '320.00' },
              { id: 117, name: 'MAC腮红', image: '/static/balance/口红.png', price: '220.00' }
            ],
            'mascara': [
              { id: 118, name: '兰蔻天鹅颈睫毛膏', image: '/static/balance/口红.png', price: '380.00' },
              { id: 119, name: '美宝莲睫毛膏', image: '/static/balance/口红.png', price: '89.00' },
              { id: 120, name: 'Dior睫毛膏', image: '/static/balance/口红.png', price: '420.00' }
            ]
          }
        },
        '面部护肤': {
          tabs: [
            { name: '彩妆套装', id: 'makeup_set' },
            { name: '洁面', id: 'cleanser' },
            { name: '润唇膏', id: 'lip_balm' },
            { name: '眼部精华', id: 'eye_serum' },
            { name: '化妆水', id: 'toner' },
            { name: '护肤套装', id: 'skincare_set' }
          ],
          products: {
            'makeup_set': [
              { id: 121, name: 'YSL彩妆套装', image: '/static/balance/口红.png', price: '1280.00' },
              { id: 122, name: 'MAC彩妆套装', image: '/static/balance/口红.png', price: '899.00' },
              { id: 123, name: 'Dior彩妆套装', image: '/static/balance/口红.png', price: '1580.00' }
            ],
            'cleanser': [
              { id: 124, name: '芙丽芳丝洁面', image: '/static/balance/口红.png', price: '150.00' },
              { id: 125, name: 'Elta MD洁面', image: '/static/balance/口红.png', price: '168.00' },
              { id: 126, name: '珂润洁面', image: '/static/balance/口红.png', price: '89.00' }
            ],
            'lip_balm': [
              { id: 127, name: 'DHC润唇膏', image: '/static/balance/口红.png', price: '68.00' },
              { id: 128, name: '凡士林润唇膏', image: '/static/balance/口红.png', price: '25.00' },
              { id: 129, name: 'Fresh润唇膏', image: '/static/balance/口红.png', price: '220.00' }
            ],
            'eye_serum': [
              { id: 130, name: '兰蔻大眼精华', image: '/static/balance/口红.png', price: '680.00' },
              { id: 131, name: '雅诗兰黛眼霜', image: '/static/balance/口红.png', price: '520.00' },
              { id: 132, name: '科颜氏牛油果眼霜', image: '/static/balance/口红.png', price: '320.00' }
            ],
            'toner': [
              { id: 133, name: '兰蔻粉水', image: '/static/balance/口红.png', price: '420.00' },
              { id: 134, name: '倩碧黄油', image: '/static/balance/口红.png', price: '185.00' },
              { id: 135, name: '科颜氏金盏花水', image: '/static/balance/口红.png', price: '340.00' }
            ],
            'skincare_set': [
              { id: 136, name: '兰蔻护肤套装', image: '/static/balance/口红.png', price: '1280.00' },
              { id: 137, name: '雅诗兰黛护肤套装', image: '/static/balance/口红.png', price: '1580.00' },
              { id: 138, name: 'SK-II护肤套装', image: '/static/balance/口红.png', price: '2580.00' }
            ]
          }
        }
      };
      
      // 根据分类名称获取数据
      const data = categoryData[this.categoryName] || {
        tabs: [
          { name: '清洁卸妆', id: 'default1' },
          { name: '美妆工具', id: 'default2' },
          { name: '彩妆香氛', id: 'default3' },
          { name: '身体护肤', id: 'default4' },
          { name: '面膜', id: 'default5' }
        ],
        products: {
          'default1': [],
          'default2': [],
          'default3': [],
          'default4': [],
          'default5': []
        }
      };
      
      this.currentTabs = data.tabs;
      this.allProducts = data.products;
      
      // 如果有品牌参数，自动选中对应的标签
      if (this.brandName) {
        this.selectBrandTab();
      }
      
      // 如果有选中的分类参数，自动选中对应的标签
      if (this.selectedCategory) {
        this.selectCategoryTab();
      }
      
      this.updateCurrentProducts();
    },
    
    // 根据品牌名称自动选中对应的标签
    selectBrandTab() {
      const brandIndex = this.currentTabs.findIndex(tab => 
        tab.name.toLowerCase() === this.brandName.toLowerCase() ||
        tab.id.toLowerCase() === this.brandName.toLowerCase()
      );
      
      if (brandIndex !== -1) {
        this.currentTab = brandIndex;
      }
    },
    
    // 根据选中的分类自动选中对应的标签
    selectCategoryTab() {
      if (this.selectedCategory) {
        const categoryIndex = this.currentTabs.findIndex(tab => 
          tab.name.toLowerCase() === this.selectedCategory.toLowerCase() ||
          tab.id.toLowerCase() === this.selectedCategory.toLowerCase()
        );
        
        if (categoryIndex !== -1) {
          this.currentTab = categoryIndex;
        }
      }
    },
    
    // 切换标签
    switchTab(index) {
      this.currentTab = index;
      this.updateCurrentProducts();
    },
    
    // 更新当前显示的商品
    updateCurrentProducts() {
      if (this.currentTabs.length > 0) {
        const currentTabId = this.currentTabs[this.currentTab].id;
        this.currentProducts = this.allProducts[currentTabId] || [];
      }
    },
    
    // 跳转到商品详情
    goToProductDetail(product) {
      uni.navigateTo({
        url: `/pages/product/product?id=${product.id}&name=${product.name}`
      });
    }
  }
}
</script>

<style scoped>
.subcategory-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

/* 标签栏 */
.tab-bar {
  display: flex;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  padding: 0 20rpx;
  overflow-x: auto;
}

.tab-item {
  padding: 30rpx 20rpx;
  position: relative;
  white-space: nowrap;
}

.tab-item.active {
  color: #ff3838;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #ff3838;
  border-radius: 2rpx;
}

.tab-text {
  font-size: 28rpx;
  color: #333;
}

.tab-item.active .tab-text {
  color: #ff3838;
  font-weight: bold;
}

/* 内容区域 */
.content-area {
  flex: 1;
  background-color: #f5f5f5;
  overflow-y: auto;
}

/* 商品区域 */
.product-section {
  padding: 20rpx;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.product-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  position: relative;
}

.product-image {
  width: 100%;
  height: 200rpx;
  border-radius: 12rpx;
  object-fit: cover;
  margin-bottom: 16rpx;
}

.product-name {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 12rpx;
  line-height: 1.2;
}

.product-tags {
  margin-bottom: 12rpx;
}

.tag {
  display: inline-block;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 20rpx;
  color: #fff;
  margin-right: 8rpx;
}

.self-operated {
  background-color: #ff3838;
}

.flash-sale {
  background-color: #ff6b35;
}

.promotion-tags {
  display: flex;
  gap: 8rpx;
  margin-bottom: 16rpx;
  flex-wrap: wrap;
}

.promo-tag {
  padding: 4rpx 8rpx;
  background-color: #fff2f0;
  color: #ff3838;
  border: 1rpx solid #ff3838;
  border-radius: 6rpx;
  font-size: 20rpx;
}

.price-section {
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff3838;
}

.price-value {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff3838;
  margin-left: 4rpx;
}

/* 空状态 */
.empty-state {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.empty-icon {
  position: relative;
  display: inline-block;
  margin-bottom: 20rpx;
}

.box-icon {
  font-size: 120rpx;
  color: #ccc;
}

.sad-face {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40rpx;
  color: #999;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style> 